<script setup >
import Manager from './components/Manager.vue'
import Ditu from './components/Ditu.vue'
import {ref} from 'vue';

const selectedMenu = ref("DI_TU");

const handleOpen = (key, keyPath) => {
  console.log(key);
  if(key === 'DI_TU'){
    console.log("DI_TU");
    selectedMenu.value = "DI_TU";
  } else if(key === 'Manager'){
    console.log("Manager");
    selectedMenu.value = "Manager";
  }
}
</script>

<template>
  <el-container class="page-body">
    <el-header>
      <el-menu default-active="DI_TU" @select="handleOpen" mode="horizontal">
        <el-menu-item index="DI_TU" key="DI_TU"> <span>地图</span> </el-menu-item>
        <el-menu-item index="Manager" key="Manager"> <span>商户管理</span> </el-menu-item>
      </el-menu>
    </el-header>
    <el-container style="width: 100%;">
      <el-main style="width: 100%; height: 100vh;">
        <div v-show="selectedMenu === 'DI_TU'"><Ditu/></div>
        <div v-show="selectedMenu === 'Manager'"><Manager/></div>
      </el-main>
    </el-container>
  </el-container>

</template>

<style scoped>
.page-body {
  width: 100%;
}

.el-header {
  padding: 0;
}

.page-header {
  background-color: black;
  color: whitesmoke;
  font-size: large;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
}
</style>
